<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>个人信息页面</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    body {
      font-family: 'Microsoft Yahei', Arial, sans-serif;
      padding: 20px;
      background-color: #f0f2f5;
    }

    .signature-container {
      background: white;
      padding: 25px;
      margin: 20px auto;
      border-radius: 12px;
      width: 500px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .signature-title {
      color: #2c3e50;
      border-bottom: 2px solid #3498db;
      padding-bottom: 8px;
    }

    .tech-stack {
      color: #e74c3c;
      font-weight: bold;
    }

    .quote-block {
      background: #f8f9fa;
      padding: 15px;
      margin: 15px 0;
    }

    .a1 {
      background-color: #FFEAA7;
      padding: 20px;
      border-radius: 10px;
      width: 500px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="app">
    <h1 style="color: #2c3e50; text-align: center; margin-bottom: 30px;">个人基本信息</h1>

    <div style="display: flex; flex-direction: column;" class="a1">
      <span>姓 名: {{name}}</span>
      <span>年 龄: {{age}}</span>
      <span>兴趣爱好: {{hobbies}}</span>
      <span>专 业: {{major}}</span>
    </div>

    <!-- 新增个性签名区域 -->
    <div class="signature-container" v-html="signature"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        name: '张三',
        age: 20,
        hobbies: '吃饭、睡觉、打豆豆',
        major: '软件技术'
      },
      computed: {
        signature() {
          return `
            <div>
              <h3 class="signature-title">${this.name}的个人世界</h3>
              <div class="quote-block">
                个性签名:
                <br>"优秀不是一种行为，而是一种习惯"
                <br><a href="https://gitee.com/zhu-xingze">个人空间</a>
              </div>
            </div>
          `;
        }
      }
    });
  </script>
</body>

</html>